今天要介紹的是 CSS 中一個重要的屬性 Display 。

在 CSS 中，元素的布局有分為兩種類型，分別為是 block（塊級元素） 與 inline（行內元素） 。

• block（塊級元素） ：塊級元素的寬度默認是100%（父元素的寬度），所以會佔據網頁中的一整行，即使空間不足，它們也會強制換行，因此每個塊級元素都獨立占據一個水平空間。
• inline（行內元素）：行內元素在同一行上排列，並根據內容自動調整寬度，但僅足夠容納其內容，不會強制換行。

兩種元素搭配起來，有一些需要注意的要點，如下：

• 在塊級元素內
  • 可以包含塊級元素
  • 也可以包含行內元素
• 在行內元素內
  • 可以包含行內元素
  • 但不能包含塊級元素

我們可以這樣比喻，現在我們把塊級元素當成 盤子 ，行內元素則當成 食物 。

• 在盤子上，我們可以
  • 放上盤子（把盤子疊起來）
  • 放上食物
• 在食物上，我們可以
  • 放上食物（加海苔到飯裡）
  • 不能放上盤子（沒有人會這樣做）

在 HTML 中，兩個類型的較具代表元素分別為：

• 塊級元素：<div> block </div>
• 行內元素：<span>inline</span>

除此之外還有 inline-block 這種混合兩者特性的屬性，我們可以把這種屬性看作，能夠像 文字（inline） 排列的 block 區塊。

Display 可以使用的屬性大致如下：

• block
• inline
• inline-block
• none
• flex
• grid
• table

依照類型，可再細分為：

• 塊級元素
  • block
  • flex
  • grid
  • table
• 行內元素
  • inline
• 同時擁有 塊級元素 與 行內元素 特性
  • inline-block